<template>
  <div>
    <el-menu default-active="1" router style="background-color: #2e4754;"
             @open="handleOpen"
             @close="handleClose"
             text-color="black"
             active-text-color="#ffd04b">
      <el-menu-item @click="text">首页</el-menu-item>
      <el-menu-item @click="student">学生管理</el-menu-item>
      <el-menu-item @click="teacher">教师管理</el-menu-item>
      <el-menu-item @click="course">课程管理</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import router from "../../router";

export default {
  name: 'MenuComponent',
  methods: {
    handleMouseEnter: function() {
      // 处理鼠标悬浮事件
      // 可以在这里修改菜单项的样式
    },
    handleMouseLeave: function() {
      // 处理鼠标离开事件
      // 可以在这里恢复菜单项的样式
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    teacher(){
      router.push('/adminindex/teacher')
    },
    text(){
      router.push('/adminindex')
    },
    student(){
      router.push('/adminindex/admin_student')
    },
    course(){
      router.push('/adminindex/admin_course')
    }
  }
};
</script>

<style>
/* 在样式中修改菜单项的悬浮效果 */
.el-menu-item:hover,
.el-submenu-title:hover {
  background-color: #444;
}
.el-menu-item{
  font-size: 17px;
  margin-top: 15px;
}
.el-menu {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 210px;
  /*!* 其他样式 *!*/
}
</style>
